<template>
  <div>
    <div class="warn">
      <img src="../../../static/images/shiming/warn.png" alt="">
      <p>实名认证信息会被严格加密，仅供银行核实信息，平台不会以任何形式透漏给第三方，请放心填写</p>
    </div>


    <div class="weui-cells weui-cells_form">

      <!--身份信息-->
      <div class="weui-cells__title">身份信息</div>
      <div class="weui-cell no-border">
        <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="请输入真实姓名" required="required" v-model="realInfo.realName"/>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">身份证号</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="请输入身份证号" required="required" v-model="realInfo.cardNo"/>
        </div>
      </div>

      <!--上传身份证-->
      <div class="weui-uploader">
        <div class="weui-uploader__bd personAut">
          <div>
            <croppa v-model="croppaFront"
                    placeholder=""
                    @new-image-drawn="newDrawnFront"
                    @image-remove="removeImg(1)"
                    ref="croppaFront"
            >
              <img slot="placeholder" src="../../../static/images/shiming/id_card_1.png" style="width: 100%">
            </croppa>
            请上传身份证正面照
          </div>
          <div>
            <croppa v-model="croppaReverse"
                    placeholder=""
                    @new-image-drawn="newDrawnReverse"
                    @image-remove="removeImg(2)"
                    ref="croppaReverse"
            >
              <img slot="placeholder" src="../../../static/images/shiming/id_card_2.png">
            </croppa>
            请上传身份证反面照
          </div>
          <div>
            <croppa v-model="croppaUserHolden"
                    placeholder=""
                    @new-image-drawn="newDrawnUserHolden"
                    @image-remove="removeImg(3)"
                    ref="croppaUserHolden"
            >
              <img slot="placeholder" src="../../../static/images/shiming/id_card_1.png">
            </croppa>
            请上传手持身份证照
          </div>
        </div>
      </div>

      <div class="splitBlock"></div>

      <!--银行卡信息-->
      <div class="weui-cells__title">银行卡信息</div>
      <div class="weui-cell no-border">
        <div class="weui-cell__hd"><label class="weui-label">银行卡号</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入银行卡号" required="required" v-model="realInfo.bankCardNo"/>
        </div>
      </div>

      <div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
          <label class="weui-label">开户银行</label>
        </div>
        <div class="weui-cell__bd">
          <select class="weui-select" :class="{'no-select':realInfo.bankName=='请选择开户银行'}" v-model="realInfo.bankName">
            <option value="请选择开户银行" >请选择开户银行</option>
            <option value="工行">工行</option>
            <option value="农行">农行</option>
            <option value="招商银行">招商银行</option>
            <option value="湖北银行">湖北银行</option>
          </select>
        </div>
      </div>

      <!--<div class="weui-cell weui-cell_select weui-cell_select-after">-->
        <!--<div class="weui-cell__hd">-->
          <!--<label class="weui-label">开户省市</label>-->
        <!--</div>-->
        <!--<div class="weui-cell__bd">-->
          <!--<select class="weui-select" :class="{'no-select':realInfo.address=='请选择开户省市'}" v-model="realInfo.address">-->
            <!--<option value="请选择开户省市">请选择开户省市</option>-->
            <!--<option value="湖北">湖北</option>-->
            <!--<option value="江西">江西</option>-->
            <!--<option value="浙江">浙江</option>-->
          <!--</select>-->
        <!--</div>-->
      <!--</div>-->

      <div class="weui-cell weui-cell_access">
        <div class="weui-cell__hd">
          <label class="weui-label">开户省市</label>
        </div>
        <div class="weui-cell__bd weui-cell__ft" :class="{'no-select':realInfo.bankCityName==''}" @click="getArea">
          {{realInfo.bankCityName?realInfo.bankProvinceName +' '+ realInfo.bankCityName:'请选择开户省市'}}
        </div>
      </div>

      <div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
          <label class="weui-label">开户支行</label>
        </div>
        <div class="weui-cell__bd">
          <select class="weui-select" :class="{'no-select':realInfo.bankSubName=='请选择开户支行'}" v-model="realInfo.bankSubName">
            <option value="请选择开户支行">请选择开户支行</option>
            <option value="湖北支行">湖北支行</option>
            <option value="江西支行">江西支行</option>
            <option value="浙江支行">浙江支行</option>
          </select>
        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">预留手机号</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入银行预留手机号" required="required" v-model="realInfo.mobileNo"/>
        </div>
      </div>

    </div>

    <div class="btn-box">
      <button class="weui-btn weui-btn_warn" :class="{btn_disabled:isDisabled}" type="button" @click.prevent="submitClick">提交审核</button>
    </div>

    <!--地址框-->
    <div :class="{actionsheetToggle:isSelectArea}">
      <div class="weui-mask_transparent actionsheet__mask"></div>
      <div class="weui-actionsheet">
        <div class="weui-actionsheet__menu">
          <div class="weui-cell">
            <div class="weui-cell__bd title">
              <p>请选择开户省市</p>
              <span class="weui-icon-cancel" @click="closeAreaBox"></span>
            </div>
          </div>
          <v-distpicker type="mobile" hide-area @selected="onSelected"></v-distpicker>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  import {getStatusMapByKey,getUser,setUser,isPoneAvailable} from '../../assets/js/tools.js';
  import {ipconfig} from '../../assets/js/ipconfig';
  import {userAuditting,getUserMsg,uploadMedia} from '../../assets/js/getData';
  export default {
    name: "personAut",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        realInfo:{
          realName:'',//姓名
          cardNo:'',//身份证号
          frontImgUrl:'',//身份证正面图片url
          reverseImgUrl:'',//身份证反面图片url
          userHoldenImgUrl:'',//用户手持身份证图片url

          bankProvinceName:'',//开户行省份
          bankCityName:'',//开户行市

          bankCardNo:'',//银行卡号
          bankName:'请选择开户银行',//开户银行
          bankSubName:'请选择开户支行',//开户支行

          mobileNo:'',//预留手机号
        },
        user:null,
        urlType:'',

        croppaFront:{},
        croppaReverse:{},
        croppaUserHolden:{},

        isSelectArea:false,
      }
    },
    created(){
      let eStorageUrl = getStatusMapByKey('eStorageUrl');
      this.urlType = eStorageUrl['userApproveImages'].val;

      this.user = getUser();

      // this.type = this.user.type;
    },
    mounted(){
      this.$refs.croppaFront.$refs.wrapper.onclick = () => {
        let arr = document.getElementsByTagName('input');
        for(let i=0; i<arr.length;i++){
          arr[i].blur();
        }
      };
      this.$refs.croppaReverse.$refs.wrapper.onclick = () => {
        let arr = document.getElementsByTagName('input');
        for(let i=0; i<arr.length;i++){
          arr[i].blur();
        }
      };
      this.$refs.croppaUserHolden.$refs.wrapper.onclick = () => {
        let arr = document.getElementsByTagName('input');
        for(let i=0; i<arr.length;i++){
          arr[i].blur();
        }
      };
    },
    computed:{
      isDisabled(){
        if(this.realInfo.realName&&this.realInfo.cardNo&&this.realInfo.frontImgUrl&&this.realInfo.reverseImgUrl&&this.realInfo.userHoldenImgUrl&&this.realInfo.bankCardNo&&this.realInfo.bankName!='请选择开户银行'&&this.realInfo.bankCityName&&this.realInfo.bankSubName!='请选择开户支行'&&this.realInfo.mobileNo){
          return false;
        }else {
          return true;

        }
      }
    },
    methods:{
      //省市选择选最后一项时触发
      onSelected(data){
        this.realInfo.bankProvinceName = data.province.value;
        this.realInfo.bankCityName = data.city.value;
        this.isSelectArea = false;
      },
      //点击选择地区显示省市列表框
      getArea(){
        this.isSelectArea = true;
      },
      //关闭选择地区框
      closeAreaBox(){
        this.isSelectArea = false;
      },
      //提交认证
      submitClick(){
        if(this.isDisabled){
          return;
        }
        if(!this.realInfo.realName){
          Toast('请输入真实姓名');
          return;
        }
        if(!this.realInfo.cardNo){
          Toast('请输入身份证号');
          return;
        }
        if(!this.realInfo.frontImgUrl) {
          Toast('请选择身份证正面照');
          return;
        }
        if(!this.realInfo.reverseImgUrl) {
          Toast('请选择身份证反面照');
          return;
        }
        if(!this.realInfo.userHoldenImgUrl) {
          Toast('请选择手持身份证照');
          return;
        }
        if(!this.realInfo.bankCardNo) {
          Toast('请输入银行卡号');
          return;
        }
        if(this.realInfo.bankName=='请选择开户银行') {
          Toast('请选择开户银行');
          return;
        }
        if(!this.realInfo.bankProvinceName&&this.realInfo.bankCityName) {
          Toast('请选择开户省市');
          return;
        }
        if(!this.realInfo.bankSubName=='请选择开户支行') {
          Toast('请选择开户支行');
          return;
        }
        if(!this.realInfo.mobileNo) {
          Toast('请输入银行预留手机号');
          return;
        }
        if(!isPoneAvailable(this.realInfo.mobileNo)) {
          Toast('手机号格式不对');
          return;
        }
        //个人认证提交
        userAuditting(this.realInfo).then(res => {
          if(res.data.reqResult.code > 0){
            getUserMsg().then(res => {
              if(res.data.reqResult.code>0){
                let data = res.data.data.user;
                this.user.userIdCardStatus = data.userIdCardStatus;
                setUser(this.user);
                this.$router.replace({name:'personAudit'});
              }else {
                Toast(res.data.reqResult.msg);
              }
            });
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      //删除图片
      removeImg(k){
        if(k==1){
          this.realInfo.frontImgUrl = '';
        }else if(k==2){
          this.realInfo.reverseImgUrl = '';
        }else {
          this.realInfo.userHoldenImgUrl = '';
        }
      },
      //上传图片
      newDrawnFront(){
        if (!this.croppaFront.hasImage()) {
          alert('no image to upload');
          return;
        }
        this.croppaFront.generateBlob((blob)=>{
          let formdata = new FormData();
          formdata.append('type',this.urlType);
          formdata.append('needSmImg',1);
          formdata.append('files',blob);
          uploadMedia(formdata).then(res => {
            if(res.data.reqResult.code > 0){
              let data = res.data.data;
              this.realInfo.frontImgUrl = data[0].sourceUrl;
            }else {
              Toast(res.data.reqResult.msg);
            }
          });
        })
      },
      newDrawnReverse(){
        if (!this.croppaReverse.hasImage()) {
          alert('no image to upload');
          return;
        }
        this.croppaReverse.generateBlob((blob)=>{
          let formdata = new FormData();
          formdata.append('type',this.urlType);
          formdata.append('needSmImg',1);
          formdata.append('files',blob);
          uploadMedia(formdata).then(res => {
            if(res.data.reqResult.code > 0){
              let data = res.data.data;
              this.realInfo.reverseImgUrl = data[0].sourceUrl;
            }else {
              Toast(res.data.reqResult.msg);
            }
          });
        })
      },
      newDrawnUserHolden(){
        if (!this.croppaUserHolden.hasImage()) {
          alert('no image to upload');
          return;
        }
        this.croppaUserHolden.generateBlob((blob)=>{
          let formdata = new FormData();
          formdata.append('type',this.urlType);
          formdata.append('needSmImg',1);
          formdata.append('files',blob);
          uploadMedia(formdata).then(res => {
            if(res.data.reqResult.code > 0){
              let data = res.data.data;
              this.realInfo.userHoldenImgUrl = data[0].sourceUrl;
            }else {
              Toast(res.data.reqResult.msg);
            }
          });
        })
      },
    }
  }
</script>

<style scoped>
  .warn{
    display: flex;
    padding: 10px 18px 10px 15px;
    background-color: #F8F8F8;
    font-size: 0.6rem;
    color: #6F6F6F;
  }
  .warn img{
    margin-right: 0.25rem;
    margin-top: 0.1rem;
    width: 0.65rem;
    height: 0.65rem;
  }
  /*身份信息*/
  .no-border:before{
    border-top: none;
  }
  /*上传身份证*/
  .weui-uploader{
    margin-top: 10px;
    padding-bottom: 15px;
  }
  .weui-uploader__bd{
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0 15px;
  }
  .weui-uploader__bd>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.6rem;
    color: #999999;
  }
  .weui-cell{
    padding: 0 0.65rem;
    height: 2.5rem;
    line-height: 2.5rem;
  }
  .weui-select{
    height: 2.5rem;
    color: #1A1A1A;
  }
  .weui-select option{
    color: #1A1A1A;
  }
  .no-select{
    color: #cccccc;
  }
  .weui-cells_form .weui-cell__ft{
    text-align: left;
    font-size: 0.7rem;
    height: 100%;
  }
  .weui-cell_access:active{
    background-color: #FFFFFF;
  }
  /*提交审核按钮*/
  .btn-box{
    margin-top: 0.75rem;
    margin-bottom: 2rem;
  }

  .weui-mask_transparent{
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: none;
  }
  .actionsheetToggle .weui-mask_transparent{
    opacity: 1;
    display: block;
  }
  .actionsheetToggle .weui-actionsheet {
    transform: translate(0, 0);
  }
  .weui-actionsheet__menu .title{
    text-align: center;
  }
  .weui-actionsheet__menu .title .weui-icon-cancel{
    position: absolute;
    top: 0;
    right: 0;
  }
  .select-area{
    display: flex;
    justify-content: space-around;
  }
</style>

